<extend name="Public:index" />
<block name="mycss">
	<style type="text/css">
		.check_box {
			display: inline-block;
			height: 20px;
			cursor: pointer;
			/* overflow: hidden; */
		}

		.param_content {
			display: inline-block;
			vertical-align: inherit;
			margin-left: 5px;
		}

		.edit_btn {
			cursor: pointer;
		}
		.action_btn{
			display: flex;
			justify-content:space-around;
		}
	</style>
</block>
<block name="main-content">
	<iframe name="ajaxifr" style="display:none;"></iframe>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12 col-lg-8">
				<div class="card">
					<div class="card-body">
						<h4 class="mt-0 header-title">监控点位设计 - {$dvo.cpn_sn}</h4>
						<p class="text-muted">选择需要添加的点位
						</p>
						<div class="table-responsive-sm">
							<input type="hidden" id="cpn_controller" value="{$cpn_controller}">
							<form id="frm" action="{:U('saveDesign')}" method="post" target="ajaxifr">
								<table id="footable" class="table  mb-0">
									<thead class="thead-light">
										<tr>
											<th scope="col">末端设备</th>
											<th scope="col">末端设备参数</th>
											<th scope="col">是否需要</th>
											<th scope="col">监控内容</th>
											<th scope="col">信号类型</th>
										</tr>
									</thead>
									<tbody class="table-sm">
										<volist name="lists" id="list">
											<tr>
												<php>
													$group_name = substr($key, 0, strrpos($key, '~'));
													$group_code = substr(strrchr($key,'~'),1);

													$num = 0;
													$is_check = '';
													foreach($list as $type_group=>$vv):
													$num = count($vv);
													if(!$is_check){
													$is_check = array_sum(array_column($vv, 'is_select')) ? 'checked' : '';
													}
												</php>
												<td rowspan="{$num}">
													<span class="checkbox check_box checkbox checkbox-success ml-3">
														<input id="checkbox_{$group_code}_{$type_group}" type="checkbox" data-group="{$group_code}_{$type_group}"
														 class="group" {$is_check}>
														<label for="checkbox_{$group_code}_{$type_group}">
															{$group_name}
														</label>
													</span>
												</td>
												<td rowspan="{$num}">
													<php>

														$canshus = $canshu_names = $sensorParams = array();
														if($sensors_params[$group_code.'_'.$type_group]){
														foreach($sensors_params[$group_code.'_'.$type_group] as $p){
														$canshus[] = array('id'=>$p['id'], 'value'=>$p['value']);
														$canshu_names[] = array('name'=>$p['sensor_param_name'], 'value'=>$p['value'].'
														'.$p['sensor_param_unit']);
														}
														} else {

														foreach($param_default[$group_code] as $p){
														$canshu_names[] = array('name'=>$p['sensor_param_name'], 'value'=>$p['sensor_param_value'].'
														'.$p['sensor_param_unit']);
														}
														}


													</php>
													<input type="hidden" class="param_group" id="canshu_{$group_code}_{$type_group}" name="canshu_{$group_code}_{$type_group}"
													 data-param='{:json_encode($canshu_names)}' value='{:json_encode($canshus)}'>
													<i class="fa fa-edit text-success edit_btn" data-toggle="modal" data-target=".param_select"
													 data-group_code="{$group_code}" data-type_group="{$type_group}"></i>
													<div class="param_content">
														<php>foreach($sensors_params[$group_code.'_'.$type_group] as $param):</php>
														<div>{$param.sensor_param_name}: {$param.value} {$param.sensor_param_unit}</div>
														<php>endforeach;</php>
													</div>
												</td>
												<volist name="vv" id="vo" key="k">
													<php>
														if($k > 1) echo '<tr>';
												</php>
												<td>
													<span class="checkbox check_box checkbox-single checkbox-success">
														<input type="checkbox" name="param_id[]" {$vo['is_select'] ? 'checked' : '' } class="{$group_code}_{$type_group} item"
														 data-group="{$group_code}_{$type_group}" data-name="{$group_name}" data-control="{$vo.control_name}"
														 data-sensor_sorts="{$vo.sensor_sorts}" data-control_sorts="{$vo.control_sorts}" data-control_type="{$vo.control_type}"
														 data-sensor_type="{$vo.sensor_type}" data-control_type_group="{$vo.control_type_group}"
														 data-sensor_type_group="{$vo.sensor_type_group}" data-count="{$vo.is_count}" value="{$vo.id}">
														<label></label>
													</span>
												</td>
												<td>{$vo.device_param_name}</td>
												<td>{$vo.sign_name}</td>
											</tr>
										</volist>
										<php>endforeach;</php>
										</volist>
									</tbody>
								</table>
								<input type="hidden" name="id" value="{$Think.request.id}">
								<input type="hidden" name="cpns" value="{$Think.request.cpns}">
							</form>
							<!--end /table-->
						</div>
						<!--end /tableresponsive-->
					</div>
				</div>
			</div>

			<!-- 传感器参数选择 -->

			<div class="col-md-12 col-lg-4">
				<div class="card">
					<div class="card-body">
						<h4 class="mt-0 header-title">选型结果</h4>
						<p class="text-muted">选型数据显示</p>
						<div class="table-responsive">
							<table class="table mb-0">
								<thead class="thead-light ">
									<tr>

										<th>专用控制器配置</th>
										<th>数量(个)</th>
									</tr>
								</thead>
								<tbody id="control">

								</tbody>
								<thead class="thead-light">
									<tr>

										<th>末端设备</th>
										<th>数量(个)</th>
									</tr>
								</thead>
								<tbody id="sensor">

								</tbody>
							</table>
							<!--end /table-->
						</div>
						<!--end /tableresponsive-->
						<div class="mt-4 action_btn" >
							<a type="button" class="btn btn-secondary waves-effect px-4" href="{:U('detail',array('id'=>$dvo['project_id']))}">返回项目</a>
							<if condition="($demo.user_id eq $userid) OR ($demo.demo neq 1)">
							<button type="submit" class="btn {$is_save ? 'btn-primary' : 'btn-warning'}  px-4" form="frm">保存 数据</button>
							</if>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- <div class="row">
			<div class="col-md-12 col-lg-12">
				<div class="card">
					<div class="card-body">
						<h4 class="mt-0 header-title">设计问题答疑</h4>
						<p class="text-muted">
							设计问题可以联系我们
						</p>
						<div class="accordion" id="accordionExample-faq">
							<div class="card shadow-none border mb-1">
								<div class="card-header" id="headingOne">
									<h5 class="my-0">
										<button class="btn btn-link ml-4" type="button" data-toggle="collapse" data-target="#collapseOne"
										 aria-expanded="true" aria-controls="collapseOne">
											什么是点位表
										</button>
									</h5>
								</div>

								<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample-faq">
									<div class="card-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
										officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
									</div>
								</div>
							</div>
							<div class="card shadow-none border mb-1">
								<div class="card-header" id="headingTwo">
									<h5 class="my-0">
										<button class="btn btn-link collapsed ml-4 align-self-center" type="button" data-toggle="collapse"
										 data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
											选型结果是什么
										</button>
									</h5>
								</div>
								<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample-faq">
									<div class="card-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
										officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
										wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
									</div>
								</div>
							</div>
							<div class="card shadow-none border mb-1">
								<div class="card-header" id="headingThree">
									<h5 class="my-0">
										<button class="btn btn-link collapsed ml-4" type="button" data-toggle="collapse" data-target="#collapseThree"
										 aria-expanded="false" aria-controls="collapseThree">
											传感器都有哪些
										</button>
									</h5>
								</div>
								<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample-faq">
									<div class="card-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
										officia aute, non cupidatat skateboard dolor brunch.
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> -->

	</div><!-- container -->

	<div class="modal fade param_select" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title mt-0" id="exampleModalLabel">传感器参数选择</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body pb-5">
					<div id="select_content">

					</div>
					<div class="row mt-3">
						<div class="col-sm-12 text-right">
							<button type="button" class="btn btn-primary sel">确定</button>
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</block>
<block name="myscript">
	<script>
		var param_obj = '';

		$(function () {
			<eq name="is_save" value="1">
				var save_param_ids = [{: implode(',', $save_param_ids)}];
				$('.group').prop('checked', false);
				$('.item').prop('checked', false);
		$('.item').each(function(){
			if($.inArray(Number(this.value), save_param_ids) != -1){
					this.checked = true;
				$('#checkbox_' + $(this).data('group')).prop('checked', true);
			}
		});
	</eq>

			tongji();
			$(document).on('click', ':checkbox', function () {
				var result = '';
				var group_code = cls = '';
				var len = 0;
				if ($(this).hasClass('group')) {
					group_code = $(this).data('group');
					$('.' + group_code).prop('checked', this.checked);
				} else {
					cls = $(this).attr('class').replace(/\s/g, '.');
					$('.' + cls).each(function () {
						if (this.checked) {
							len++;
						}
					});

					group_code = cls.substring(0, cls.indexOf('.'));

					if (len > 0) {
						$('#checkbox_' + group_code).prop('checked', true);
					} else {
						$('#checkbox_' + group_code).prop('checked', false);
					}
				}
				//统计结果
				tongji();

			});

			$('.param_select').on('show.bs.modal', function (e) {
				var values;
				var url = "{:U('getSensorParam')}";
				var obj = $(e.relatedTarget);
				var sensor_type = obj.data('group_code');
				var html = '';
				var zhi = [];
				var arr = [];

				param_obj = obj.parent().find('.param_group');
				arr = JSON.parse(param_obj.val());
				zhi = $.map(arr, function (a) {
					return a.id + '#' + a.value;
				});
				//console.log(zhi);
				$.getJSON(url, { sensor_type: sensor_type }, function (res) {
					for (var i = 0; i < res.length; i++) {
						html += '<div class="form-group row">';
						html += '<label class="col-sm-3 col-form-label text-right">' + res[i].sensor_param_name + '</label>';
						html += '<div class="col-sm-7"><select class="form-control pselect" data-param_name="' + res[i].sensor_param_name + '" data-param_unit="' + res[i].sensor_param_unit + '">';
						values = res[i].sensor_param_range.split('#');

						for (var x = 0; x < values.length; x++) {
							if ($.inArray(res[i].id + '#' + values[x], zhi) !== -1) {
								html += '<option value="' + res[i].id + '#' + values[x] + '" selected>' + values[x] + '</option>';
							} else {
								html += '<option value="' + res[i].id + '#' + values[x] + '">' + values[x] + '</option>';
							}
						}
						html += '</select></div><div class="col-sm-2">' + res[i].sensor_param_unit + '</div></div>';
					}

					$('#select_content').html(html);
				});

			});

			$('.sel').on('click', function () {
				var tmp = [];
				var arr = [];
				var obj = {};
				var obj1 = {};
				var arr1 = [];
				var html = '';
				$('.pselect').each(function () {
					obj = {};
					tmp = $(this).val().split('#');
					obj.id = tmp[0];
					obj.value = tmp[1];
					arr.push(obj);
					html += '<div>' + $(this).data('param_name') + ':' + tmp[1] + ' ' + $(this).data('param_unit') + '</div>';

					obj1 = {};
					obj1.name = $(this).data('param_name');
					obj1.value = tmp[1] + ' ' + $(this).data('param_unit');
					arr1.push(obj1);
				});

				param_obj.val(JSON.stringify(arr));
				//修改默认参数显示
				param_obj.data('param', arr1);

				param_obj.parent().find('.param_content').html(html);
				$('.param_select').modal('hide');
				tongji();
				//console.log(arr);
			});

		});

		function tongji() {
			var html1 = '', html2 = '', str = '';
			var controls = {}, sensors = {};
			var tmp1 = {};
			var tmp2 = {};
			var sensor_names = [];
			var params = {};

			var arr = [];

			$('.item:checked').each(function () {
				var obj = {};
				obj.name = $(this).data('name') + '#' + JSON.stringify($('#canshu_' + $(this).data('group')).data('param'));
				obj.control = $(this).data('control');
				obj.control_type = $(this).data('control_type');
				obj.sensor_type = $(this).data('sensor_type');
				obj.control_type_group = $(this).data('control_type_group');
				obj.sensor_type_group = $(this).data('sensor_type_group');
				obj.sensor_sorts = $(this).data('sensor_sorts');
				obj.control_sorts = $(this).data('control_sorts');
				obj.is_count = $(this).data('count');

				arr.push(obj);
			});

			//传感器排序
			arr.sort(sensor_sorts);
			for (var i = 0; i < arr.length; i++) {
				//传感器
				if (arr[i].is_count == 1) {
					if (typeof tmp2[arr[i]['name']] == 'undefined') tmp2[arr[i]['name']] = [];
					tmp2[arr[i]['name']].push(arr[i]);
				}

			}

			//控制器排序
			arr.sort(control_sorts);
			for (var i = 0; i < arr.length; i++) {

				//控制器
				if ($.trim(arr[i]['control_type']).length > 0) {
					if (typeof tmp1[arr[i]['control']] == 'undefined') tmp1[arr[i]['control']] = [];
					tmp1[arr[i]['control']].push({
						name: arr[i]['control'],
						control_type: arr[i]['control_type'],
						control_type_group: arr[i]['control_type_group'],
						sorts: arr[i]['control_sorts'],
					});
				}

			}

			controls = getResult(tmp1, 'control_type_group');
			sensors = getResult(tmp2, 'sensor_type_group');
			//console.log(tmp1);
			//console.log(tmp2);

			html1 = '<tr><td>' + $('#cpn_controller').val() + '</td><td>1</td></tr>';
			for (var n1 in controls) {
				html1 += '<tr><td>' + controls[n1].name + '</td><td>' + controls[n1].num + '</td></tr>';
			}

			for (var n2 in sensors) {
				sensor_names = sensors[n2].name.split('#');
				if (sensor_names[1] != 'undefined') {
					str = '';
					params = JSON.parse(sensor_names[1]);
					for (var n3 in params) {
						str += '<div class="text-muted">' + params[n3]['name'] + ':' + params[n3]['value'] + '</div>';
					}
				}
				html2 += '<tr><td>' + sensor_names[0] + str + '</td><td>' + sensors[n2].num + '</td></tr>';
			}

			$('#control').html(html1);
			$('#sensor').html(html2);
		}

		function getResult(arr, fld) {

			var data = [];
			var groups = [];
			var obj = {};
			for (var n in arr) {
				obj = {};
				groups = [];

				for (var i = 0; i < arr[n].length; i++) {
					groups.push(arr[n][i][fld]);
				}

				obj.name = n;
				//obj.num = $.unique(groups).length;
				obj.num = distinct(groups).length;
				data.push(obj);
			}

			return data;

		}

		function sensor_sorts(a, b) {
			return a.sensor_sorts - b.sensor_sorts
		}

		function control_sorts(a, b) {
			return a.control_sorts - b.control_sorts
		}

		function distinct(arr) {
			return Array.from(new Set(arr))
		}

	</script>
</block>